<template>
    <view class="content">
      <view class="btn-area">
        <button @tap="chooseImage" type="primary">拍照</button>
      </view>
      <view class="img-container">
        <image :src="imageSrc" mode="aspectFill"></image>
      </view>
	  <view class="display" v-for="(item,index) in resultData" :key="index">
			<view class="child">
				<view>
					<text>{{item.keyword}}</text>
				</view>
				<view>
					<text>{{item.root}}</text>
				</view>
				<view>
					<text>{{item.score}}</text>
				</view>
			</view>
	  </view>
	  <canvas style="width: 300px; height: 200px;" canvas-id="canvas" id="canvas"></canvas>
    </view>
</template>

<script>
	export default {
	  data() {
	    return {
	      imageSrc: '',
		  name:'',
		  resultData:[
			],
	    }
	  },
	  onLoad() {
	  	// this.getToken()
		const ctx = uni.createCanvasContext('canvas')
		
		ctx.rect(519, 259, 259, 916)
		ctx.stroke()
		
		ctx.draw()
	  },
	  methods: {
		testUpload(){
			this.upLoadImg();
		},
	    chooseImage() {
	      uni.chooseImage({
	        count: 1,
	        success: (res) => {
			  this.imageSrc = res.tempFilePaths[0];
			  this.name = res.tempFiles[0].name
			  console.log(this.imageSrc)
			  this.upLoadImg()
	        }
	      });
	    },
		getToken(url){
			uni.request({
			    url: 'http://localhost:8081/baiduApi/advancedGeneral', //仅为示例，并非真实接口地址。
				method:'POST',
			    data: {
					url:url
				},
			    header:{
					"Accept": "application/json",
					"Content-Type": "application/json"
				},
			    success: (res) => {
					uni.hideLoading();
					console.log(res.data.data);
					this.resultData = res.data.data;
			       
			    }
			});

		},
		upLoadImg(){
			uni.showLoading({
			  title: '上传中' 
			})
			const filePath = this.imageSrc // 选择图片的临时路径
			const name = this.name
			uniCloud.uploadFile({
				filePath:filePath,
				cloudPath:"/aiImage/"+Date.now() + "-" + name,
				cloudPathAsRealPath:true,
			}).then(res=>{
				
				console.log(res["fileID"])
				this.getToken(res["fileID"])
			})
			
		}
	  }
	}

</script>

<style lang="scss">
	.content{
	  padding: 20rpx;
	  .img-container{
	    width: 100%;
	    height: 600rpx;
		padding-bottom: 40rpx;
	    image{
	      width: 100%;
	      height: 100%;
	    }
	  }
	  .btn-area{
	    padding-bottom: 40rpx;
	  }
	  .display{
		  width: 100%;
		  text{
			  font-size: 28rpx;
			  padding-bottom: 10rpx;
		  }
		  .child{
			  padding: 30rpx;
			  border-bottom: 1rpx solid #eee;
		  }
	  }
	}
	
	
</style>
